<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
          position: relative;
          width: 80px;
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: skyblue;
          border-radius: 50%;
          margin: 100px auto;
        }
        .nav-circle {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          position: absolute;
          /*总共6个子项，每个子项的旋转角度为 360deg / 6=60deg*/
          transform: rotate(calc(var(--i) * 60deg)) translateX(-100px);
          /* opacity: 0; */
        }
        .nav-content {
          width: 100%;
          height: 100%;
          background-color: pink;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          /*元素发生旋转后，造成文字的角度也发生了变化，把要逆时针旋转相同角度*/
          transform: rotate(calc(var(--i) * -60deg));
        }
      </style>
</head>
<body>
    <!-- 点击nav，将触发显示所有圆圈 -->
  <div class="nav">
    首页
    <!--圆形菜单项-->
    <div class="nav-circle" style="--i: 0">
      <div class="nav-content">菜单1</div>
    </div>
    <div class="nav-circle" style="--i: 1">
      <div class="nav-content">菜单2</div>
    </div>
    <div class="nav-circle" style="--i: 2">
      <div class="nav-content">菜单3</div>
    </div>
    <!--下面再重复3项-->
  </div>
</body>
</html>